<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负边距布局</title>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body{margin:0;}
.header{ width:960px;height:100px; margin:0 auto 10px; background:blue;color:#fff; font-size:20px; font-weight:bolder}
.wrapper{width:960px;margin:0 auto; }
.main{ float:left;width:100%;background:yellow;}
.content{margin:8px 8px 8px 208px;background:green;height:300px}
.nav{ float:left;width:200px;margin-left:-960px; background:red;}
.nav_list{ background:pink;margin: 8px;height:300px}
.clear{clear:both;}
.foot{ height:100px;margin-top:20px;background:#ccc}
</style>
</head>

<body>
<div class="header">负边距布局,内容区优先显示(内容区可做成自适应宽度)</div>
<div class="wrapper">
	<div class="main">
		<div class="content">content - hello</div>
	</div>
	<div class="nav">
		<div class="nav_list">  nav - - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - world nav - worldnav - world nav - world</div>
	</div>
</div>
<div class="clear"></div>
<div class="foot"></div>
</body>
</html>
<!--
 请问：
1, .nav  margin-left:-100%; 换为 -200px 不起作用,为什么？
	margin 是相对于父元素的。
2, .foot margin-top 不起作用,为什么？
3, ie6 下 hello 和 world 重合，不呈两列 ,怎么修复?
谢谢了！请有空给回复一下，我对 float 不理解。
=张林
-->
